<template>
    <div class="answer-list">
        <div class="answer-item"
        v-for="(item, index) in list">
            <div class="fraction" :style="{color : getColor(item.answer.fraction)}" v-if="item.paper.showScore">{{ item.answer.fraction }}分</div>
            <div class="answer">
                <div>
                    试卷：
                    <el-popover
                    placement="top"
                    width="170"
                    trigger="hover" v-if="item.paper">
                        <div style="padding: 5px;">
                            <p>标题：{{ item.paper.title }}</p>
                            <div>类型：
                                <el-tag
                                type="success"
                                disable-transitions>{{ types[item.paper.type] }}</el-tag>
                            </div>
                            <div>数量：{{ item.paper.list ? item.paper.list.split(',').length : 0}}</div>
                            <div>时间：{{ item.paper.time / 60000 }}分钟</div>
                        </div>
                        <el-tag slot="reference" @click="openPaper(item.paper.id)">{{ item.paper.title }}</el-tag>
                    </el-popover>
                </div>
                <div>
                    状态：
                    <el-tag
                    :type="answerStatus[item.answer.status].type"
                    disable-transitions>{{ answerStatus[item.answer.status].title }}</el-tag>
                </div>
                <div>{{ dayjs(item.answer.submitTime).format('YYYY-MM-DD HH:mm')}} </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    export default {
        props : ['list'],
        data(){
            return {
                
            }
        },
        computed : {
            ...mapState(['limits', 'types', 'answerStatus']),
        },
        methods : {
            ...mapMutations(['openPaper']),
            getColor(fraction){
                if (fraction >= 70) {
                    return "#67c23a"
                }else if(fraction >= 30){
                    return "#E6A23C"
                }else{
                    return "#f00"
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.answer-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    @media screen and (max-width: 800px) {
        .answer-item {
            margin: 5px 0;
            border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
            width: 100%;
        }
    }
    @media screen and (min-width: 800px) {
        .answer-item {
            margin: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            border-radius: 10px;
            width: 310px;
        }
    }
    .answer-item{
        position: relative;
        // height: 100px;
        padding: 20px;
        display: flex;
        cursor: pointer;
        .fraction{
            font-size: calc(14px + 1vw);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: calc(100px + 1vw);
        }
        .answer{
            &>div{
                margin: 5px 0;
            }
        }
    }
}
</style>